<template>
    <div class="bigBox">
        <ol>
            <li>
                <h2>基本信息</h2>
            </li>
            <li>版本：{{ version }}</li>
            <li>作者：Zsnoin能</li>
            <li>技术栈：Electron + Vue3 + Element-Plus + TS</li>
            <li>开源地址：https://gitee.com/zsnoin-can/electron</li>
            <li>若有侵权请联系作者删除</li>
            <li>QQ：3201468129</li>
        </ol>
        <ol>
            <li>
                <h2>萌虎地址API</h2>
            </li>
            <li>地址：https://img.moehu.org/</li>
        </ol>
        <ol>
            <li>
                <h2>手机壁纸API</h2>
            </li>
            <li>地址：https://www.jianshu.com/p/fb1d1ad58a0b</li>
        </ol>
        <ol>
            <li>
                <h2>Pexels</h2>
            </li>
            <li>地址：https://www.pexels.com/api/</li>
            <li>Pexels官方提供个人api接口文档，个人api有请求次数限制。默认的用不了说明次数达到限制了，可以前往官网自行申请 apiKey，在其它设置中填入apiKey替换即可。</li>
        </ol>
        <ol>
            <li>
                <h2>Bing壁纸</h2>
            </li>
            <li>请求地址：https://raw.onmicrosoft.cn/Bing-Wallpaper-Action/main/data/zh-CN_all.json</li>
            <li>使用：https://bing.com/ + url，https://bing.com/拼接图片地址。</li>
        </ol>
        <ol>
            <li>
                <h2>软件更新</h2>
            </li>
            <li>下载地址：https://env-00jxh5vvj39r.normal.cloudstatic.cn/wallpaper/wallpaper.exe</li>
            <li>免费的unicloud空间，过期或者超额就用不了，可以去gitee自己拉去，自行打包。</li>
            <li class="download">
                <el-button type="success" @click="update" size="small" round>检测更新</el-button>
                <div class="bar">
                    <Progress :progress="downProgress"></Progress>
                </div>
            </li>
        </ol>
    </div>
    <el-dialog v-model="centerDialogVisible" title="检测到新版本" width="300" center>
        <span>
            <b>版本: {{ versionInfo.version }}</b>
            <pre style="padding: 0 10px;">
                {{ versionInfo.releaseNotes }}
            </pre>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false" size="small" round>取消</el-button>
                <el-button type="primary" @click="updateApp" size="small" round>更新</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { settingStore } from '@renderer/store/setting'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'
import Progress from '@renderer/components/Progress.vue'
const { ipcRenderer } = require('electron')
const set = settingStore()
const { downloadLocation } = storeToRefs(set)
const baseUrl = 'https://env-00jxh5vvj39r.normal.cloudstatic.cn/wallpaper'
let myApi
const version = ref('')
const downProgress = ref(0)
const centerDialogVisible = ref(false)
const isDownloading = ref(false)
const versionInfo: any = ref({})

const update = async () => {
    const res = await myApi.updateSoftware(baseUrl)
    versionInfo.value = res
    if (isDownloading.value) {
        ElMessage({
            message: '正在下载中，请稍后',
            type: 'warning',
            plain: true
        })
        return
    }
    if (res && res.version) {
        centerDialogVisible.value = true
    }
    if (res == null) {
        ElMessage({
            message: '当前已是最新版本',
            type: 'success',
            plain: true
        })
    }
}
const updateApp = () => {
    isDownloading.value = true
    const obj = {
        download: 'https://env-00jxh5vvj39r.normal.cloudstatic.cn/wallpaper/wallpaper.exe',
        fileName: 'wallpaper.exe',
        savePath: downloadLocation.value
    }
    myApi.downloadUpdate(obj)
    centerDialogVisible.value = false
}
const getVersion = async () => {
    const res = await myApi.getVersion()
    version.value = res
}
onMounted(() => {
    myApi = window.api
    // 监听下载完成事件
    ipcRenderer.removeAllListeners('download-complete')
    ipcRenderer.on('download-complete', (_, info) => {
        downProgress.value = 0
        isDownloading.value = false
        ElMessage({
            message: info.message,
            type: info.type,
            plain: true
        })
    })
    // 监听下载进度事件
    ipcRenderer.on('download-progress', (_, progress) => {
        downProgress.value = progress
    })
    getVersion()
})
</script>

<style scoped lang="scss">
.bigBox {
    border-radius: 10px;
    margin: 20px;
    position: relative;

    ol {
        padding: 10px 20px;
        font-size: 15px;
        background-color: $setBack;
        border-radius: 10px;
        margin-top: 10px;
        box-shadow: 0.3em 0.3em 0.7em #00000015;
        transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        li {
            list-style-type: none;
            margin-bottom: 5px;

            h2 {
                margin-bottom: 10px;
            }
        }

        .download {
            padding: 10px 0;
            display: grid;
            grid-template-columns: 100px 1fr;
            align-items: center;
            gap: 10px;

            .bar {
                padding-top: 2px;
                height: 20px;
            }
        }
    }
}
</style>